import React, {useState} from "react";
import {View} from "@tarojs/components";
import {Input} from "@taroify/core";
import {HideLoading, ShowFail, ShowLoading, ToPage, VibrateShort} from "@/utils";
import Taro from "@tarojs/taro";
import http from "@/request";
import userStore from "@/store/user"

import "./index.scss"

interface loginType {
    userCode: string,
    password: string
}
const Login: React.FC = () => {
    const [redirectPath, setRedirectPath] = useState<string>('')
    const [user, setUser] = useState<Partial<loginType>>({
        userCode: Taro.getStorageSync('user-login-userCode') || '',
    })

    Taro.useLoad((params) => {
        if (params.redirect) {
            setRedirectPath(decodeURIComponent(params.redirect))
        }
    })

    const accountInput = (e) => {
        setUser({...user, userCode: e.target.value})
        VibrateShort()
    }
    const passwordInput = (e) => {
        setUser({...user, password: e.target.value})
        VibrateShort()
    }

    const doLogin = () => {
        const {userCode, password} = user
        ShowLoading()
        http.post('/disp/wx/system/login', {
            password,
            userCode,
            platform: 'wx'
        }).then(res => {
            const { token, userVo } = res.data
            Taro.setStorageSync('user-info', {
                ...userVo,
                token
            })
            userStore.updateInfo({
                ...userVo,
                token
            })
            Taro.setStorageSync('user-login-userCode', userCode)
            ToPage(redirectPath || '/pages/home/index', true)
            HideLoading()
            // updateUserInfo({
            //     token,
            //     ...userVo
            // })
            // navigate('/order/order-list', { replace: true })
        }).catch(err => {
            console.log(err)
            ShowFail(err.msg || '请求数据失败')
        })
    }
    return (<View className="login-page flex-column flex-center">
        <View className="page-bg"></View>
        <View className="flex-column flex-center flex1">
            <View className="logo flex-row flex-item page-background">
                <View className="EN_text">D</View>
                <View className="CN_text">
                    <View>派单系统</View>
                    <View>ispatch system</View>
                </View>
            </View>
        </View>
        <View className="flex-column flex-center flex2">
            <View className="btns-container">
                <Input className="login-input"
                       placeholder-class="placeholder-style"
                       placeholder="请输入工号"
                       value={user?.userCode}
                       onInput={accountInput}
                ></Input>
                <View className="bottom-line"></View>
                <Input className="login-input"
                       placeholder-class="placeholder-style"
                       placeholder="请输入密码"
                       value={user?.password}
                       onInput={passwordInput}
                       type={"password" as any} ></Input>
            </View>
            <View className="login-btn" hoverClass="active-btn" onClick={doLogin}>登录</View>
        </View>
    </View>)
}

export default Login